<template>
  <div class="container">
    <div class="header-content">
      <h3>新增高校</h3>
    </div>
    <div class="my-content">
      <div class="my-content-item">
        <el-form
          label-position="right"
          label-width="100px"
          :model="formUniversitiy"
        >
          <el-form-item label="学校名称：">
            <el-input v-model="formUniversitiy.schoolName"></el-input>
          </el-form-item>
          <el-form-item label="学校地址：">
            <el-input v-model="formUniversitiy.schoolAddress"></el-input>
          </el-form-item>
          <el-form-item label="学校电话：">
            <el-input v-model="formUniversitiy.schoolPhone"></el-input>
          </el-form-item>
          <el-form-item label="学校官网：">
            <el-input v-model="formUniversitiy.schoolWebsite"></el-input>
          </el-form-item>
          <el-form-item label="学校类型：">
            <el-input v-model="formUniversitiy.schoolType"></el-input>
          </el-form-item>
          <el-form-item label="学校简介：">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="formUniversitiy.schoolIntroduction"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="my-content-item2">
        <el-button id="btn" type="primary" @click="addSubmit"
          >新增大学</el-button
        >
      </div>
    </div>
  </div>
</template>
      </div>
    </div>
  </div>
</template>

<script>
import { addUniversity } from "@/api";
import { validPhone, validURL } from "@/utils/validate";
export default {
  data() {
    return {
      formUniversitiy: {
        schoolName: "",
        schoolAddress: "",
        schoolPhone: "",
        schooWebsite: "",
        schoolType: "",
        schoolIntroduction: "",
      },
    };
  },
  created() {},
  methods: {
    async addSubmit() {
      let flag1 = this.formUniversitiy.schoolName.trim() !== "";
      let flag2 = this.formUniversitiy.schoolAddress.trim() !== "";
      let flag3 = this.formUniversitiy.schoolType.trim() !== "";
      let flag4 = this.formUniversitiy.schoolIntroduction.trim() !== "";
      let phoneFlag = validPhone(this.formUniversitiy.schoolPhone);
      let urlFlag = validURL(this.formUniversitiy.schoolWebsite);
      if (!phoneFlag) {
        this.$message.warning("电话格式错误");
        return;
      }
      if (!urlFlag) {
        console.log(this.formUniversitiy.schooWebsite);
        this.$message.warning("网址格式错误");
        return;
      }
      //发送请求
      if (flag1 && flag2 && flag3 && flag4) {
        let res = await addUniversity(this.formUniversitiy);
        if (res.code == 0) {
          this.$message.success("新增大学成功");
          this.$router.push({ name: "manageUniversity" });
        } else {
          this.$message.error(res.msg);
        }
      } else {
        this.$message.warning("学校名称、类型、简介、地址不允许空值");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  .header-content {
    width: 70%;
    border-bottom: 1px solid rgb(217, 212, 212);
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    background: rgb(255, 255, 255);
  }
  .my-content {
    padding-bottom: 20px;
    border-radius: 0px 0px 10px 10px;
    background: rgb(255, 255, 255);
    width: 70%;
    .my-content-item {
      padding: 30px;
    }
  }
}
#btn {
  margin-left: 128px;
  margin-top: -30px;
}
</style>